<template>
  <div class="dataBase">
    <ContentWrap>
      <el-form ref="formRef" :model="formData" :rules="rules">
        <el-row>
          <el-col :span="8">
            <el-form-item label="模板名称" prop="name">
              <ns-input v-model="formData.name" placeholder="请输入模板名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="模板内容" />
        <el-card shadow="never" class="mb-18px">
          <div class="card-form flex justify-between">
            <el-form-item label="首页工作台内容显示状态">
              <el-switch v-model="formData.showWorkbench" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="展示对象" prop="showObj" required>
              <el-checkbox-group v-model="formData.showObj" @change="showObjChange">
                <el-checkbox value="StandardStatistics">数据保护标准</el-checkbox>
                <el-checkbox value="DeptStatistics">所属组织机构</el-checkbox>
                <el-checkbox value="SystemStatistics">所属应用系统</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="报表查询">
              <el-switch v-model="formData.reportSearch" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </div>
        </el-card>
        <div v-for="(card, cardIndex) in formData.context" :key="cardIndex">
          <el-card shadow="never" class="mb-18px" v-if="card.show">
            <el-row>
              <el-col :span="8">
                <el-form-item :label="card.dataObjectName" />
              </el-col>
            </el-row>
            <el-table :data="card.view" style="width: 100%">
              <el-table-column label="序号" type="index" width="100px" />
              <el-table-column label="图形可视化">
                <template #default="{ row, $index }">
                  <el-form-item
                    :prop="`context[${cardIndex}].view[${$index}].chartsType`"
                    :rules="[{ required: true, message: `图形可视化不能为空` }]"
                  >
                    <el-select v-model="row.chartsType" clearable placeholder="请选择图形">
                      <el-option
                        v-for="(item, index) in viewList"
                        :key="index"
                        :label="item.value"
                        :value="item.key"
                        :disabled="card.view.some((ite) => ite.chartsType == item.key)"
                      />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="资产类型">
                <template #default="{ row, $index }">
                  <el-form-item
                    :prop="`context[${cardIndex}].view[${$index}].dataType`"
                    :rules="[{ required: true, message: `资产类型不能为空` }]"
                  >
                    <el-checkbox-group v-model="row.dataType">
                      <el-checkbox label="结构化资产">结构化资产</el-checkbox>
                      <el-checkbox label="非结构化资产">非结构化资产</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="系列轴">
                <template #default="{ row, $index }">
                  <el-form-item
                    :prop="`context[${cardIndex}].view[${$index}].others`"
                    :rules="[{ required: true, message: `系列轴不能为空` }]"
                  >
                    <el-checkbox-group v-model="row.others">
                      <el-checkbox
                        label="数据保护标准"
                        v-if="card.dataObject !== 'StandardStatistics'"
                        >数据保护标准</el-checkbox
                      >
                      <el-checkbox label="所属组织机构" v-if="card.dataObject !== 'DeptStatistics'"
                        >所属组织机构</el-checkbox
                      >
                      <el-checkbox
                        label="所属应用系统"
                        v-if="card.dataObject !== 'SystemStatistics'"
                        >所属应用系统</el-checkbox
                      >
                    </el-checkbox-group>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200px">
                <template #default="scope">
                  <el-button
                    :icon="Minus"
                    size="small"
                    circle
                    @click="delItem(card.view, scope.$index)"
                    v-if="scope.$index !== 0"
                    class="ml-12px"
                  />
                  <el-button
                    :icon="Plus"
                    size="small"
                    circle
                    @click="addItem(card.view, scope.$index)"
                    class="ml-12px"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-form>
      <div class="mt-18px text-center">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </ContentWrap>
  </div>
</template>

<script setup lang="tsx">
import { useRouter } from 'vue-router'
import { Plus, Minus, Close } from '@element-plus/icons-vue'
import * as reportTempApi from '@/api/report/reportTemp/index'
import * as reportManageApi from '@/api/report/reportManage/index'
import { ComponentInternalInstance, getCurrentInstance } from 'vue'
const message = useMessage() // 消息弹窗
const formRef = ref()
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const router = useRouter()
const route = useRoute()
const formData = ref({
  name: '',
  showWorkbench: 0,
  reportSearch: 0,
  showObj: [],
  context: [
    {
      show: false,
      dataObject: 'StandardStatistics',
      dataObjectName: '数据保护标准',
      view: [
        {
          chartsType: '',
          dataType: [],
          others: []
        }
      ]
    },
    {
      show: false,
      dataObject: 'DeptStatistics',
      dataObjectName: '所属组织机构',
      view: [
        {
          chartsType: '',
          dataType: [],
          others: []
        }
      ]
    },
    {
      show: false,
      dataObject: 'SystemStatistics',
      dataObjectName: '所属应用系统',
      view: [
        {
          chartsType: '',
          dataType: [],
          others: []
        }
      ]
    }
  ]
})
const rules = {
  name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
  showObj: [{ required: true, message: '展示对象不能为空', trigger: 'blur' }]
}

const showObjChange = (e) => {
  formData.value.context.forEach((item) => {
    item.show = formData.value.showObj.some((ite) => ite === item.dataObject)
  })
}

const delItem = (arr, index) => {
  arr.splice(index, 1)
  console.log('index', index)
}
const addItem = (arr, index) => {
  arr.splice(index + 1, 0, {
    chartsType: '',
    dataType: [],
    others: []
  })
  console.log('index', index)
}

const cancel = () => {
  router.back()
}
const confirm = () => {
  console.log('formData.value', formData.value)
  formRef.value.validate(async (valid) => {
    console.log('valid', valid)
    if (valid) {
      console.log('formData.value', formData.value)
      const api =
        route.query.type == 'create'
          ? reportTempApi.reportTempCreate
          : reportTempApi.reportTempUpdate
      const data = await api(formData.value)
      console.log('data', data)
      if (data) {
        message.success('操作成功')
        router.back()
      }
    }
  })
}

// 数据对象列表
const dataObjectList = ref()
const getDataObject = async () => {
  const data = await reportManageApi.reportManageDataObject()
  console.log('data', data)
  dataObjectList.value = data
}
// 数据对象列表
const viewList = ref()
const getView = async () => {
  const data = await reportManageApi.reportManageView()
  console.log('data', data)
  viewList.value = data
}
// 获取详情
const getDetail = async () => {
  const data = await reportTempApi.reportTempGet({ id: route.query.id })
  formData.value = data
  const temp = []
  formData.value.showObj = data.context.map((item) => {
    if (item.show) {
      temp.push(item.dataObject)
    }
  })
  formData.value.showObj = temp
}
onMounted(() => {
  getDataObject()
  getView()
  if (route.query.type == 'update') {
    getDetail()
  }
})
</script>

<style lang="scss" scoped>
.card-form {
  :deep(.el-form-item) {
    margin-bottom: 0 !important;
  }
}
.dataBase {
  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: inline-flex;
    align-items: center;
    line-height: 23px;
    padding-left: 12px;
  }
  .el-form .el-select {
    width: 100%;
  }
  :deep(.hide-expand .cell) {
    display: none;
  }
  :deep(.el-form .el-cascader) {
    width: 100%;
  }
  :deep(.operate-btn .el-button.is-text) {
    padding: 0 10px 0 0;
  }
  .el-dropdown-link:focus {
    outline: none;
  }
}
// :deep(.el-table .el-form-item--default) {
//   margin-bottom: 0 !important;
// }
</style>
